<template>
  <div class="orderdetails">
    <van-nav-bar title="订单详情" left-arrow>
      <template #left>
        <van-icon
          name="arrow-left"
          size="20"
          @click="$router.back()"
          style="margin-right: 10px"
        />
      </template>
      <template #right>
        <van-icon name="wap-home-o" size="20" @click="goto('/home')" />
      </template>
    </van-nav-bar>
    <!-- 订单信息 -->
    <div class="info">
      <p>
        订单状态：<span>{{ orderItem.orderStatusString }}</span>
      </p>
      <p>
        订单编号：<span>{{ orderItem.orderNo }}</span>
      </p>
      <p>
        下单时间：<span>{{ orderItem.createTime }}</span>
      </p>

      <!-- 按钮 -->
      <van-button
        v-if="orderItem.orderStatus == 0"
        style="margin-bottom: 10px"
        color="#1baeae"
        block
        @click="toPay"
        >去支付</van-button
      >
      <van-button
        v-if="!(orderItem.orderStatus < 0 || orderItem.orderStatus == 4)"
        block
        @click="closeOrder(orderItem.orderNo)"
        >取消订单</van-button
      >
    </div>
    <div class="info">
      <p>
        商品金额：<span>{{ orderItem.totalPrice }}</span>
      </p>
      <p>配送方式：<span>普通快递</span></p>
    </div>
    <van-card
      v-for="it in orderItem.newBeeMallOrderItemVOS"
      :key="it.goodsId"
      :num="it.goodsCount"
      :price="it.sellingPrice"
      :title="it.goodsName"
      :thumb="it.goodsCoverImg"
      desc="全场包邮"
    />

    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <div :style="{ width: '90%', margin: '0 auto', padding: '50px 0' }">
        <van-button
          :style="{ marginBottom: '10px' }"
          color="#1989fa"
          block
          @click="payOrder(1)"
          >支付宝支付</van-button
        >
        <van-button color="#4fc08d" block @click="payOrder(2)"
          >微信支付</van-button
        >
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      // 传递用户和商品id ----订单详情
      orderItem: {},
      show: false,
    };
  },
  mounted() {
    this.$parent.showTabbar = false;
    this.refresh();
  },
  destroyed() {
    this.$parent.showTabbar = true;
  },
  methods: {
    // 获取订单详情
    async refresh() {
      const { id } = this.$route.query;
      const { data } = await this.$axios.get(`/order/${id}`);
      this.orderItem = data;
      console.log(this.orderItem);
    },
    goto(url) {
      this.$router.replace(url);
    },
    // 去支付
    toPay() {
      this.show = true;
    },
    payOrder(type) {
      let typePay = String(type);
      console.log(typePay);
      this.$axios
        .get("/paySuccess", {
          params: {
            orderNo: this.orderItem.orderNo,
            payType: typePay,
          },
        })
        .then((data) => {
          console.log(data);
          this.refresh();
          this.show = false;
        });
    },

    // 取消订单 订单号
    closeOrder(id) {
      Dialog.confirm({
        title: "什么!!!你要取消订单?",
      }).then(() => {
        this.$axios.put(`/order/${id}/cancel`).then((data) => {
          // console.log(data);
          if (data.resultCode === 200) {
            this.refresh();
          }
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.orderdetails {
  .info {
    padding: 20px 20px;
    margin-bottom: 20px;
    background-color: rgba($color: rgb(204, 204, 203), $alpha: 0.1);
    p {
      font-size: 15px;
      color: rgb(165, 165, 165);
      span {
        color: #000;
      }
    }
  }
  .van-card {
    background-color: rgba($color: rgb(204, 204, 203), $alpha: 0.1);
  }
}
</style>